import React, { useEffect, useState, useMemo } from 'react';
import {useNavigate} from "react-router-dom";
import { Row, Col, Progress } from 'antd'
import 'echarts-gl'
import moment from "moment";
import AMapLoader from '@amap/amap-jsapi-loader';
import {Get, Url} from "../../server/http";
import { getVolumeByMB, getVolume, cpy } from "../../utils/cmn";
import Header from './Header'
import Title from './Title'
import OverviewCard from './OverviewCard'
import ItemCard from './ItemCard'
import Histogram from '../../component/Histogram'
import PieChart from '../../component/PieChart'
import chinaJson from '../../utils/cities/dianjun_sub.json'

import './index.less'

const townList = [
	{lng: 111.28546780, lat: 30.69362632, name: '点军街道'},
	{lng: 111.32806270, lat: 30.60390956, name: '艾家镇'},
	{lng: 111.18969975, lat: 30.68026338, name: '桥边镇'},
	{lng: 111.11365619, lat: 30.65358401, name: '土城乡'},
	{lng: 111.25029983, lat: 30.64412036, name: '联棚乡'},
]
const mapKey = '3d944fa68cc341b006493f43d96bb16a';

let mapObj = null;  // AMap对象
let map = null;     // 创建的地图实例

const Screen = () => {
	const navigate = useNavigate();
	const [assetData, setAsset] = useState([]);         // 资产统计信息
	const [resourceData, setResource] = useState([]);   // 资源统计信息
	const [fundData, setFund] = useState([]);           // 资金统计信息
	const [subsidyData, setSubsidy] = useState([]);     // 补贴统计信息
	const [doubtSubsidyData, setDoubtSubsidy] = useState([]);     // 疑点补贴统计信息
	const [townSubsidyData, setTownSubsidy] = useState([]);     // 按乡镇统计补贴
	const [townDoubtSubsidyData, setTownDoubtSubsidy] = useState([]);     // 按乡镇统计疑点补贴

	useEffect(() => {
		getTownshipAsset();
		getTownshipResource();
		getTownshipFund();
		getSubsidy();
		getDoubtSubsidy();
		getTownshipSubsidy();
		getTownshipDoubtSubsidy();
		initMap()

		return () => {
			mapObj = null;  // AMap对象
			map = null;     // 创建的地图实例
		}
	}, [])

	// 初始化地图
	const initMap = () => {
		AMapLoader.load({
			"key": mapKey,              // 申请好的Web端开发者Key，首次调用 load 时必填
			"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			"plugins": ['AMap.GeoJSON'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			"AMapUI": {             // 是否加载 AMapUI，缺省不加载
				"version": '1.1',   // AMapUI 缺省 1.1
				"plugins":[],       // 需要加载的 AMapUI ui插件
			},
			"Loca":{                // 是否加载 Loca， 缺省不加载
				"version": '2.0.0'  // Loca 版本，缺省 1.3.2
			},
		}).then((AMap)=>{
			mapObj = AMap;
			// getAllArea();
			creatMap(mapObj);
		}).catch(e => {
			console.log(e);
		})
	}

	// 创建地图
	const creatMap = () => {
		map = new mapObj.Map('china-map', {
			zoom: 11,
			resizeEnable: true,
			pitch: 45,
			center: [111.169233, 30.662411],
			layers: [new mapObj.TileLayer.Satellite()],
			showBuildingBlock: true,
			showLabel: false,
			zoomEnable: false,   //是否缩放
			dragEnable: false,  //是否拖动
			mapStyle: "amap://styles/7049faf9a31244784b3c15dcf5c1f30d",
		});
		const style = {
				'width': '8rem',
				'background-color': 'rgba(0,0,0,0)',
				'border-width': 0,
				'text-align': 'center',
				'font-size': '20px',
				'color': 'white'
			};

		for (let k in townList) {
			let text = new mapObj.Text({
				text: townList[k]['name'],
				anchor:'center',
				style,
				position: [townList[k]['lng'], townList[k]['lat']]
			});
			text.setMap(map);
		}


		let geoJson = new mapObj.GeoJSON({
			geoJSON: chinaJson,
			// 还可以自定义getMarker和getPolyline
			getPolygon: function(geojson, lnglats) {
				return new mapObj.Polygon({
					path: lnglats,
					strokeColor: 'gray',
					fillColor: '#514dc7'
				});
			}
		});
		map.add(geoJson);
	}

	// 点击跳转
	const onClick = path => {
		navigate('/'+path)
	}

	// 按村镇获取资产
	const getTownshipAsset = () => {
		Get(Url.ASSET_STATISTIC, {level: 'township'}).then(
			data=>{
				let temp = [
					{name: '点军街道', value: 0},
					{name: '桥边镇', value: 0},
					{name: '艾家镇', value: 0},
					{name: '土城乡', value: 0},
					{name: '联棚乡', value: 0},
				]
				if (data?.['街道']?.[1]) {
					temp[0]['value'] = Math.floor(data['街道'][1])
				}
				if (data?.['土城乡']?.[1]) {
					temp[1]['value'] = Math.floor(data['土城乡'][1])
				}
				if (data?.['桥边镇']?.[1]) {
					temp[2]['value'] = Math.floor(data['桥边镇'][1])
				}
				if (data?.['联棚乡']?.[1]) {
					temp[3]['value'] = Math.floor(data['联棚乡'][1])
				}
				if (data?.['艾家镇']?.[1]) {
					temp[4]['value'] = Math.floor(data['艾家镇'][1])
				}
				setAsset(temp);
			}
		)
	}
	// 按村镇获取资源
	const getTownshipResource = () => {
		Get(Url.RESOURCE_STATISTIC, {level: 'township'}).then(
			data=>{
				let temp = [
					{name: '点军街道', value: 0},
					{name: '桥边镇', value: 0},
					{name: '艾家镇', value: 0},
					{name: '土城乡', value: 0},
					{name: '联棚乡', value: 0},
				]
				if (data?.['街道']?.[1]) {
					temp[0]['value'] = Math.floor(data['街道'][1])
				}
				if (data?.['土城乡']?.[1]) {
					temp[1]['value'] = Math.floor(data['土城乡'][1])
				}
				if (data?.['桥边镇']?.[1]) {
					temp[2]['value'] = Math.floor(data['桥边镇'][1])
				}
				if (data?.['联棚乡']?.[1]) {
					temp[3]['value'] = Math.floor(data['联棚乡'][1])
				}
				if (data?.['艾家镇']?.[1]) {
					temp[4]['value'] = Math.floor(data['艾家镇'][1])
				}
				setResource(temp);
			}
		)
	}
	// 按村镇获取资金
	const getTownshipFund = () => {
		Get(Url.FUND_STATISTIC,).then(
			data=>{
				let temp = [
					{name: '点军街道', value: 0},
					{name: '桥边镇', value: 0},
					{name: '艾家镇', value: 0},
					{name: '土城乡', value: 0},
					{name: '联棚乡', value: 0},
				]
				if (data?.['街道']?.[1]) {
					temp[0]['value'] = Math.floor(data['街道'][1])
				}
				if (data?.['土城乡']?.[1]) {
					temp[1]['value'] = Math.floor(data['土城乡'][1])
				}
				if (data?.['桥边镇']?.[1]) {
					temp[2]['value'] = Math.floor(data['桥边镇'][1])
				}
				if (data?.['联棚乡']?.[1]) {
					temp[3]['value'] = Math.floor(data['联棚乡'][1])
				}
				if (data?.['艾家镇']?.[1]) {
					temp[4]['value'] = Math.floor(data['艾家镇'][1])
				}
				setFund(temp);
			}
		)
	}

	// 按类别统计补贴数据
	const getSubsidy = () => {
		Get(Url.SUBSIDY_STATISTIC,).then(
			data => {
				if (data?.status === 'success') {
					let list = data?.data
					let temp = [
						{name: '生态', value: Math.floor(list['ecological']) || 0},
						{name: '高龄', value: Math.floor(list['elderly']) || 0},
						{name: '耕地', value: Math.floor(list['farmland']) || 0},
						{name: '移民', value: Math.floor(list['immigration']) || 0},
						{name: '就业', value: Math.floor(list['employment']) || 0},
						{name: '灵活就业', value: Math.floor(list['flex_employment']) || 0},
						{name: '实习', value: Math.floor(list['intership']) || 0},
					]
					setSubsidy(temp)
				}
			}
		)
	}
	// 按类别统计违规补贴数据
	const getDoubtSubsidy = () => {
		Get(Url.DOUBT_SUBSIDY_STATISTIC,).then(
			data => {
				if (data?.status === 'success') {
					let list = data?.data
					let temp = [
						{name: '生态', value: Math.floor(list['ecological']) || 0},
						{name: '高龄', value: Math.floor(list['elderly']) || 0},
						{name: '耕地', value: Math.floor(list['farmland']) || 0},
						{name: '实习', value: Math.floor(list['intership']) || 0},
					]
					setDoubtSubsidy(temp)
				}
			}
		)
	}

	// 按乡镇统计补贴数据
	const getTownshipSubsidy = () => {
		Get(Url.TOWNSHIP_SUBSIDY_STATISTIC,).then(
			data => {
				if (data?.status === 'success') {
					let list = data?.data
					const arr = {'点军': '点军街道', '桥边': '桥边镇', "艾家": "艾家镇", "土城": "土城乡", "联棚": "联棚乡"}
					let info = []
					for (let k in list) {
						let temp = 0
						for (let m in list[k]) {
							if (list[k][m]) {
								for (let n in list[k][m]) {
									if (list[k][m][n]) {
										temp += list[k][m][n]
									}
								}
							}
							info.push({name: arr[m], value: temp})
							list[k][m] = Math.floor(temp)
						}
					}
					setTownSubsidy(info)
				}
			}
		)
	}
	// 按乡镇统计违规补贴数据
	const getTownshipDoubtSubsidy = () => {
		Get(Url.TOWNSHIP_DOUBT_SUBSIDY_STATISTIC,).then(
			data => {
				if (data?.status === 'success') {
					let list = data?.data
					const arr = {'点军': '点军街道', '桥边': '桥边镇', "艾家": "艾家镇", "土城": "土城乡", "联棚": "联棚乡"}
					let info = []
					for (let k in list) {
						let temp = 0
						for (let m in list[k]) {
							if (list[k][m]) {
								for (let n in list[k][m]) {
									if (list[k][m][n]) {
										temp += list[k][m][n]
									}
								}
							}
							info.push({name: arr[m], value: temp})
							list[k][m] = Math.floor(temp)
						}
					}
					setTownDoubtSubsidy(info)
				}
			}
		)
	}


	return (
		<div className={'full-screen'}>
			<Header />
			<div className={'map-warp'}>
				<div id={'china-map'} className={'chinaMap'}/>
			</div>
			<div className={'suspended-layer-left'}>
				<Row style={{width: '100%', height: '31vh', marginTop: '1vh', cursor: 'pointer'}}>
					<ItemCard path={'base'}>
						<div style={{paddingTop: '1vh'}}>
							<Row type={'flex'}><Title title={'农村总体概况'}/></Row>
							<Row type={'flex'} justify={'space-around'} style={{marginTop: '1.8vh'}}>
								<OverviewCard title={'行政村数'} num={41} unit={'个'}/>
								<OverviewCard title={'农户数'} num={21324} unit={'户'}/>
								<OverviewCard title={'集体组织成员数'} num={61371} unit={'个'}/>
							</Row>
							<Row type={'flex'} justify={'space-around'} style={{marginTop: '1.8vh'}}>
								<OverviewCard title={'资产净值'} num={'10.8'} unit={'亿元'}/>
								<OverviewCard title={'资产原值'} num={'12.1'} unit={'亿元'}/>
								<OverviewCard title={'资源总面积'} num={'12.85'} unit={'万亩'}/>
							</Row>
						</div>
					</ItemCard>
				</Row>
				<Row style={{width: '100%', height: '57vh', marginTop: '1vh', cursor: 'pointer'}} onClick={()=>onClick('property')}>
					<ItemCard >
						<div style={{paddingTop: '1vh'}}>
							<Row type={'flex'}><Title title={'农村集体“三资”基本情况'}/></Row>
							<Row type={'flex'}>
								<Col span={12} style={{height: '26vh', padding: '0.5vh'}}>
									<Row type={'flex'} justify={'center'} className={'chart-title'}>资产情况</Row>
									<div style={{width: '100%', height: '23vh'}}>
										<Histogram data={assetData} unit={'元'}/>
									</div>
								</Col>
								<Col span={12} style={{height: '26vh', padding: '0.5vh'}}>
									<Row type={'flex'} justify={'center'} className={'chart-title'}>资源情况</Row>
									<div style={{width: '100%', height: '23vh'}}>
										<Histogram data={resourceData} unit={'亩'}/>
									</div>
								</Col>
								<Col span={12}>
									<Row type={'flex'} justify={'center'} style={{color: 'white'}}>资产占比</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<PieChart id={'fund'} data={assetData} title={'资产(元)'}/>
									</div>
								</Col>
								<Col span={12}>
									<Row type={'flex'} justify={'center'} style={{color: 'white'}}>资源占比</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<PieChart id={'resource'} data={resourceData} title={'资源(亩)'}/>
									</div>
								</Col>
							</Row>
						</div>
					</ItemCard>
				</Row>
			</div>
			<div className={'suspended-layer-right'}>
				<Row style={{width: '100%', height: '60vh', marginTop: '1vh', cursor: 'pointer'}} onClick={()=>onClick('allowance')}>
					<ItemCard >
						<div style={{paddingTop: '1vh'}}>
							<Row type={'flex'}><Title title={'惠农惠民补贴情况'}/></Row>
							<Row type={'flex'}>
								<Col span={12} style={{height: '26vh', padding: '0.5vh'}}>
									<Row type={'flex'} justify={'center'} style={{color: 'white', marginTop: '2vh'}}>各乡镇补贴</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<Histogram data={townSubsidyData}/>
									</div>
								</Col>
								<Col span={12}>
									<Row type={'flex'} justify={'center'} style={{color: 'white', marginTop: '2vh'}}>各乡镇疑点补贴</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<Histogram data={townDoubtSubsidyData}/>
									</div>
								</Col>
							</Row>
							<Row type={'flex'}>
								<Col span={12} style={{height: '26vh', padding: '0.5vh'}}>
									<Row type={'flex'} justify={'center'} style={{color: 'white', marginTop: '2vh'}}>补贴占比</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<PieChart id={'subsidy'} data={subsidyData} title={'补贴(元)'}/>
									</div>
								</Col>
								<Col span={12}>
									<Row type={'flex'} justify={'center'} style={{color: 'white', marginTop: '2vh'}}>疑点补贴占比</Row>
									<div style={{width: '100%', height: '24vh'}}>
										<PieChart id={'doubtSubsidy'} data={doubtSubsidyData} title={'补贴(元)'}/>
									</div>
								</Col>
							</Row>
						</div>
					</ItemCard>
				</Row>
				<Row style={{width: '100%', height: '28vh', marginTop: '1vh'}}>
					<ItemCard >
						<div style={{paddingTop: '1vh'}}>
							<Row type={'flex'}><Title title={'乡村振兴衔接项目资金情况'}/></Row>

						</div>
					</ItemCard>
				</Row>
			</div>
		</div>
	);
};

export default Screen;
